<template>
  <div class="arrangework">
    <div class="top">
      <div class="tip">员工周排班表</div>
      <div style="margin-left:30px;margin-right:15px;">设置休息日</div>
      <el-select v-model="freeDay" placeholder="请选择">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
      <div style="margin-left:100px;margin-right:10px;">设置请假时间</div>
      <el-date-picker
        v-model="value1"
        type="datetimerange"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        size="small"
        style="margin-left:20px;"
      >
      </el-date-picker>
    </div>
    <div class="bottom">
      <div class="hearder"></div>
      <el-table
        :data="tableData"
        style="width: 100%"
        tooltip-effect="dark"
        border
        :cell-class-name="changeTrStyle"
        highlight-current-row
      >
        <el-table-column prop="date" label="日期/时间" width="100">
        </el-table-column>
        <el-table-column
          v-for="(item, index) in timeList"
          :key="index"
          :label="item.value"
          width="40"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div>{{ scope.row.colorList[index].status }}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      freeDay: "",
      tableData: [
        {
          date: "礼拜一",
          colorList: [
            { status: 1 },
            { status: 2 },
            { status: 3 },
            { status: 1 },
            { status: 1 },
            { status: 3 },
            { status: 1 },
            { status: 3 },
            { status: 1 },
            { status: 1 },
            { status: 3 },
            { status: 2 },
            { status: 1 },
            { status: 1 },
            { status: 2 },
            { status: 1 },
            { status: 1 },
            { status: 3 },
            { status: 1 },
            { status: 2 },
            { status: 1 },
            { status: 2 }
          ]
        },
        {
          date: "礼拜一",
          colorList: [
            { status: 1 },
            { status: 2 },
            { status: 3 },
            { status: 1 },
            { status: 1 },
            { status: 3 },
            { status: 1 },
            { status: 3 },
            { status: 1 },
            { status: 1 },
            { status: 3 },
            { status: 2 },
            { status: 1 },
            { status: 1 },
            { status: 2 },
            { status: 1 },
            { status: 1 },
            { status: 3 },
            { status: 1 },
            { status: 2 },
            { status: 1 },
            { status: 2 }
          ]
        },
        {
          date: "礼拜一",
          colorList: [
            { status: 1 },
            { status: 2 },
            { status: 3 },
            { status: 1 },
            { status: 1 },
            { status: 3 },
            { status: 1 },
            { status: 3 },
            { status: 1 },
            { status: 1 },
            { status: 3 },
            { status: 2 },
            { status: 1 },
            { status: 1 },
            { status: 2 },
            { status: 1 },
            { status: 1 },
            { status: 3 },
            { status: 1 },
            { status: 2 },
            { status: 1 },
            { status: 2 }
          ]
        }
      ],
      timeList: [
        {
          key: 1,
          value: 8
        },
        {
          key: 1,
          value: 8
        },
        {
          key: 1,
          value: 9
        },
        {
          key: 1,
          value: 9
        },
        {
          key: 1,
          value: 10
        },
        {
          key: 1,
          value: 10
        },
        {
          key: 1,
          value: 11
        },
        {
          key: 1,
          value: 11
        },
        {
          key: 1,
          value: 12
        },
        {
          key: 1,
          value: 12
        },
        {
          key: 1,
          value: 13
        },
        {
          key: 1,
          value: 13
        },
        {
          key: 1,
          value: 14
        },
        {
          key: 1,
          value: 14
        },
        {
          key: 1,
          value: 15
        },
        {
          key: 1,
          value: 15
        },
        {
          key: 1,
          value: 16
        },
        {
          key: 1,
          value: 16
        },
        {
          key: 1,
          value: 17
        },
        {
          key: 1,
          value: 17
        },
        {
          key: 1,
          value: 18
        },
        {
          key: 1,
          value: 18
        }
      ]
    };
  },
  methods: {
    changeTrStyle({ row, column, rowIndex, columnIndex }) {
      let progressRate = row.colorList;
      if (columnIndex > 0) {
        const currentIndex = columnIndex - 1;
        switch (progressRate[currentIndex].status) {
          case 1:
            return "developing";
            break;
          case 2:
            return "testing";
            break;
          case 3:
            return "publishing";
            break;
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.arrangework {
  background-color: #fff;
  border-top: 10px solid #ebeef1;
  border-bottom: 10px solid #ebeef1;
  /deep/ .top {
    padding-top: 20px;
    display: flex;
    align-items: center;
    margin-left: 20px;
    font-size: 14px;
    .tip {
      font-size: 18px;
      font-weight: 900;
    }
    .el-select {
      .el-input__inner {
        height: 30px;
        width: 120px;
      }
      .el-input__icon {
        line-height: 30px;
      }
    }
    .el-date-editor {
      width: 300px;
    }
    .el-range-input {
      width: 100px;
    }
  }
  /deep/ .bottom {
    margin: 0 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    .hearder {
      width: 100%;
      height: 70px;
      border: 1px solid #ebeef5;
      border-bottom: none;
      box-sizing: border-box;
    }
    .el-table tr td.developing {
      background: #ffe4b5;
      opacity: 0.9;
    }
    .el-table tr td.testing {
      background: #ffa500;
      opacity: 0.9;
    }
    .el-table tr td.publishing {
      background: #87cefa;
      opacity: 0.9;
    }
    .el-table tr td.published {
      background: #9acd32;
      opacity: 0.9;
    }
    // .el-table--border::after, .el-table--group::after{
    //   display: none;
    // }
  }
}
</style>
